<template>
    <div>

        <!--                                    头部-->
        <div class="divdetails">
            <div class="details">
                <button @click="goback"> 返回</button>
                <div class="detailsname">{{Songdetails[0].al.name}}</div>
            </div>
        </div>
        <!--        背景图片-->
        <div class="backimg">
            <div class="tu" :style="{ 'background-image': 'url(' + Songdetails[0].al.picUrl + ')' }">
            </div>


            <div class="bigbox" ref="bigbox">

                <!--                         切换大盒子-->
                <div class="tabbox" @click="tabshow('show')" v-show="isshow">
                    <!--                            读碟棒-->
                    <img class="needle" src="../assets/img/needle-ip6.png" alt="">
                    <!--                                中间图片-->
                    <div class="imgbox">
                        <img src="../assets/img/blackCircle.png" alt="">
                        <div class="detailspic">
                            <img class="detailspicUrl" :src="Songdetails[0].al.picUrl" alt="">
                            <!--                {{Songdetails}}-->
                        </div>
                    </div>
                </div>
                <!--                歌词-->
                <div class="geci tabbox"  @click="tabshow('noshow')" v-show="!isshow"  >
                    <ul>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                        <li>585555555555 </li>
                    </ul>
                </div>

            </div>
            <!--            播放标签-->
            <div class="audio">
                <!--                <button @click="play('play')" v-show="isplay">B播放</button>-->
                <!--                <button @click="play('pause')" v-show="!isplay">暂停</button>-->
                <br>
                <audio :src=" audioSrc " ref="audio" controls v-show="false"></audio>
            </div>
            <!--                                                下面播放按钮组-->
            <div class="foot">

                <img src="../assets/img/list-3.png" alt="">
                <img src="../assets/img/list-4.png" alt="">
                <img src="../assets/img/list-2.png" alt="">
                <!--                    滑块-->
                <van-slider class="slider" v-model="value" @change="onChange"/>
                <div>
                    <img src="../assets/img/循环.png" alt="">
                    <img src="../assets/img/pre_l.png" alt="">
                    <img src="../assets/img/play.png" @click="play('play')" v-show="isplay" alt="">
                    <img src="../assets/img/pause.png" @click="play('pause')" v-show="!isplay" alt="">
                    <img src="../assets/img/pre_r.png" alt="">
                    <img src="../assets/img/列表.png" alt="">
                </div>

            </div>


        </div>

    </div>

</template>
<script>
    import {Toast} from 'vant';

    export default {
        name: "divdetails",
        methods: {
            onChange(value) {
                Toast('当前值：' + value);
            },

            goback() {
                this.$router.go(-1)
            },
            //歌曲播放
            play(value) {
                this.isplay = !this.isplay
                if (value == "play") {
                    // 获取dom
                    this.$refs.audio.play()
                } else {
                    // 获取dom
                    this.$refs.audio.pause()
                }

            },
            // tabshow
            tabshow(value) {
                this.isshow = !this.isshow
                if (value == "show") {
                    // 获取dom
                    this.$refs.bigbox.show()
                } else {
                    // 获取dom
                    this.$refs.bigbox.noshow()
                }

            },
        },

        data() {
            return {
                active: 1,
                // 设置
                Songdetails: [{al: {picUrl: ""}}],
                audioSrc: "",
                isplay: true,
                isshow:true,
                value: 50,
            };
        },

        created() {

            //获取参数  歌曲id
            // this.$route.query.songId
            console.log(this.$route.query.songID)
            this.audioSrc = ` https://music.163.com/song/media/outer/url?id=${this.$route.query.songID}.mp3 `
            this.axios.get(`/music-api/song/detail?ids=${this.$route.query.songID}`).then((res) => {
                console.log(res);
                this.Songdetails = res.data.songs
            })
        },


        // components: {
        //
        // }


    };
</script>
<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    @keyframes yyy {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /*小旋转*/
    @keyframes rotatemin {
        from {
            transform: rotate(0deg);
            transform-origin: left top;
        }
        to {
            transform: rotate(-20deg);
            transform-origin: left top;


        }
    }

    /*歌曲名字*/
    .detailsname {
        position: absolute;
        top: 30%;
        left: 40%;
    }

    .details {
        height: 70px;
        border: deeppink 1px solid;
        position: relative;
        padding-left: 20px;
    }

    .details button {
        margin-top: 20px;
        width: 60px;
        height: 30px;
    }

    .imgbox {
        position: relative;
        box-sizing: border-box;

        margin: auto;
        text-align: center;
        line-height: 300px;
        /*border: red 1px solid;*/
        width: 300px;
        height: 300px;
        animation: yyy 10s infinite linear;
    }

    .imgbox img {
        vertical-align: middle;
    }

    @keyframes yyy {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .detailspicUrl {
        width: 125px;
        position: absolute;
        top: 30%;
        left: 29%;
        border-radius: 50%;
    }

    .tu {
        position: fixed;
        box-sizing: border-box;

        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        filter: blur(5px);
    }


    /*播放按钮*/
    .audio {
        position: absolute;
        bottom: 150px;
        left: 40px;

    }

    .needle {
        width: 100px;
        position: absolute;
        left: 50%;
        z-index: 2;
        animation: rotatemin 2s linear;
    }

    /*    底部   播放 盒子*/
    .foot {
        position: fixed;
        bottom: 50px;
        /*left: 20px;*/
        width: 100%;
        /*border: deeppink 1px solid;*/

    }

    .foot > img {
        width: 8%;
        margin-bottom: 30px;
        margin-left: 19%;

    }

    .foot > div > img {
        width: 8%;
        margin-top: 30px;
        margin-left: 9%;
    }

    .slider {
        width: 80%;
        margin: auto;
    }
    .geci{
        box-sizing: border-box;
        position: relative;
        width: 80%;
        height: 300px;
        text-align: center;
        margin: auto;
        overflow: auto;
        z-index: 66;
        border: yellow 1px solid;
    }
</style>
